<template>
  <div class="zh-classroom-visits2">
    <nav-header>
      <template slot="menuBefore">
        <li>
          <router-link to="/affairs/inspection/classroom-visits" tag="a">校园巡检</router-link>
        </li>
        <li class="gap">&gt;</li>
      </template>
      <li>直播详情</li>
    </nav-header>
    <div class="tour-course">
      <div class="tour-course-menu">
        <ul>
          <li class="i_vp clear"><a @click="back">返回</a></li>
          <li class="i_vp clear">
            <span>设备名称：</span>
            <span>{{ liveData.deviceName }}</span>
          </li>
          <li class="i_vp clear">
            <span>校园分区：</span>
            <span>{{ liveData.partition }}</span>
          </li>
          <li class="i_vp clear">
            <span>设备说明：</span>
            <span>{{ liveData.deviceDes }}</span>
          </li>
          <li class="i_vp clear">
            <div>
              <span>设备状态：</span>
              <span>{{ liveData.deviceStatus }}</span>
            </div>
            <div>
              <span>课程名称：</span>
              <span :title="liveData.coursename">{{ liveData.coursename }}</span>
            </div>
            <div>
              <span>主讲人：</span>
              <span>{{ liveData.userName }}</span>
            </div>
            <div>
              <span>直播时间：</span>
              <span>{{ liveData.time }}</span>
            </div>
            <div>
              <span>课程地址：</span>
              <span style="word-wrap: break-word;word-break: break-all;">{{ liveData.liveUrl }}</span>
            </div>
          </li>
        </ul>
      </div>
      <div class="course-video">
        <div class="course-mb">
          <div class="video-py" id="newPlayDom">
            <!-- <flvPlayer v-if="playerOption.url " :muteds="false" id="flvPlayer1" :playerOption.sync="playerOption"></flvPlayer>         -->
            <!--&& !webrtc <webRtcPlayer :uid="`flvPlayer1`" v-else-if="webrtc && webrtcUrl" :url="webrtcUrl"></webRtcPlayer> -->
            <flvdplayer  v-if="playerOption.url" :id="`playerId${domId}`" :playerOption.sync="playerOption" ></flvdplayer>
            <img v-else src="../../../../static/image/image_mingshi_bg3.png" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import flvdplayer from '@/components/public/flvdplayerX';
// import flvPlayer from '../../public/flvPlayer';
// import flvPlayer from '@/components/common/cast-flv'
import webRtcPlayer from '@/components/common/webrtcPlayer'
export default {
  components: {
    // flvPlayer,
    webRtcPlayer,
    flvdplayer
  },
  data() {
    return {
      player: null, // 播放器
      loading: {
        status: false
      },
      liveData: {
        deviceName: '实验室主监控',
        partition: '实验楼 > 二楼',
        deviceDes: '------',
        deviceStatus: '空闲中',
        coursename: '------',
        time: '',
        userName: '------',
        liveUrl: '------'
      },
      playerOption: {
        type: 'flv',
        url: '',
        muted: true,
        status_stream:true,
        status_stream_audio:true
      },
      liveUrl: '',
      webrtcUrl: '',
    };
  },
  created() {
    // this.getLiveUrl();
  },
  mounted() {
    this.getLiveInfo();
  },
  beforeDestroy() {

  },
  computed: {
    webrtc() {
      return this.$store.getters.isSupportWebRtc
    },
    allownine() {
      return this.$store.getters.isAllowNine
    },
  },
  methods: {
    // getLiveUrl(){
    // 	let success = (data=>{
    //         this.liveUrl = data.data;
    // 	})
    // 	this.$ajax.get('api/recorder/live_url',{func:{success:success}})
    // },
    getLiveInfo() {
      this.loading.status = true;
      let success = data => {
        this.loading.status = false;
        if (!is_empty(data.data)) {
          this.liveData.deviceName = data.data.recorder_name ? data.data.recorder_name : '-';
          this.liveData.partition = data.data.class_name ? data.data.class_name : '-';
          this.liveData.deviceDes = data.data.comment ? data.data.comment : '-';
          this.liveData.deviceStatus = data.data.recorder_status === 0 ? '空闲中' : '上课中';
          this.liveData.coursename = data.data.coursename ? data.data.coursename : '-';
          this.liveData.time = (data.data.starttime ? data.data.starttime : '') + '-' + (data.data.endtime ? data.data.endtime : '');
          this.liveData.userName = data.data.username ? data.data.username : '-';
          this.liveData.liveUrl = data.data.recorder_status === 0 ? '' : data.data.page_url;
          this.liveUrl = data.data.play_url;
          this.liveData.type = data.data.type;
          this.liveData.ip = data.data.ip;
          this.liveData.stream_addr = data.data.stream_addr;
          this.playerOption.url = data.data.play_url;
          this.playerOption.status_stream = data.data.status_stream =="1"?true:false;;
          this.playerOption.status_stream_audio = data.data.status_stream_audio =="1"?true:false;
        // console.log(data.data, '666gfh')
          this.webrtcUrl = data.data.webrtc_url
        }


      };
      let fail = data => {
        this.loading.status = false;
        this.$message.error(data.msg);
      };

      //执行请求，并将回调方法变成config成员以便鉴权过期可以执行
      this.$ajax.get('api/recorder/get_live_info', {
        params: {id: this.$route.params.id},
        func: {success: success, fail: fail}
      });
    },
    back() {
      this.$router.go(-1);
    }
  }
};
</script>

<style lang="scss">
.zh-classroom-visits2 {
  // .video-js .vjs-big-play-button .vjs-icon-placeholder:before {
  //         left: 22px !important;
  // }

  .tour-course {
    background: #effaff;
    position: absolute;
    width: 100%;
    height: calc(100% - 61px);
    top: 61px;
    left: 0;
    font-size: 0;
    overflow: hidden;

    > div {
      text-align: left;
      text-align-last: initial;
      height: 100%;
      display: inline-block;
      vertical-align: top;
    }
  }

  .videoPN {
    width: 100%;
    height: 100%;
  }

  .video-js {
    width: 100%;
    height: 100%;
  }

  .tour-course-menu {
    background: #dff3f9;
    width: 240px;
    overflow: hidden;

    .el-menu-item.is-active {
      color: #ffffff;
    }

    ul {
      height: 100%;

      .i_vp {
        position: relative;
        padding: 22px 10px 22px 25px;
        font-size: 12px;
        border-bottom: 1px solid #d1e5eb;
        overflow-wrap: break-word;
        word-break: break-all;
        line-height: 20px;
      }

      li:first-child {
        padding-left: 0;
        font-size: 14px;
        cursor: pointer;

        a {
          display: inline-block;
          padding-left: 45px;
          width: 100%;
          height: 100%;
        }
      }

      li:first-child:before {
        display: inline-block;
        content: ' ';
        height: 10px;
        width: 10px;
        border-width: 0 0 2px 2px;
        border-color: #232323;
        border-style: solid;
        transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
        position: absolute;
        top: 50%;
        left: 29px;
        margin-top: -5px;
      }

      li:last-child {
        div {
          margin: 20px 0;

          span:first-child {
            display: inline-block;
            width: 60px;
            text-align: right;
          }
        }
      }
    }
  }

  .course-video {
    width: calc(100% - 240px);
  }

  .course-mb {
    height: 90%;
    width: 100%;
    margin: 3% auto 0;
    position: relative;

    > i {
      font-size: 30px;
      cursor: pointer;
      position: absolute;
      top: 48%;

      &:nth-of-type(1) {
        left: 0;
      }

      &:nth-of-type(2) {
        right: 0;
      }

      &:hover {
        color: #409eff;
      }
    }

    > div {
      width: 95%;
      height: 100%;
      // text-align: justify;
      // text-align-last: justify;
      background: #ccc;
      margin: auto;
    }
  }

  .play-no {
    .i_vidioLk {
      display: none;
    }

    .i_vidioI {
      display: none;
    }

    .vjs-custom-skin > .video-js .vjs-big-play-button {
      text-align: center;
    }
  }

  .i_equipment {
    border-bottom: 1px solid #c4e2eb;
    font-size: 14px;

    > h2,
    > a {
      font-size: 14px;
      height: 54px;
      line-height: 54px;
      padding: 0 20px;
    }

    > a {
      > i {
        background: none;
        margin-right: 10px;
      }
    }
  }

  // .video-js .vjs-big-play-button .vjs-icon-placeholder:before {
  // 	left: 36px;
  // }

  .vjs-custom-skin > .video-js .vjs-control-bar .vjs-time-control {
    display: inline-block;
    width: auto;
    overflow: hidden;
    text-align: center;
  }
}
</style>
